<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改配置内容</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <script src="../js/verify.js"></script>
</head>
<body>
<div style="width:80%;height:100%;margin:15px auto;overflow:auto;">
    <form class="layui-form" action="">
        <div class="layui-form-item" id="title_div">
            <label class="layui-form-label" >配置属性</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="name" required  lay-verify="required" placeholder="比如：联系电话" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" id="message_phone">
            <label class="layui-form-label" >配置内容</label>
            <div class="layui-input-block">
                <input type="text" id="value" name="value" required  lay-verify="required"  lay-verify="phone" placeholder="请输入新的内容" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="radio" name="status" id="yao" lay-filter="needtu" value="2" disabled title="图片" ><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><span >图片</span></div>
                <input type="radio" name="status" id="buyao" lay-filter="needtu" value="1" disabled title="文字" checked ><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><span >文字</span></div>
                <input type="radio" name="status" id="zuobiao" lay-filter="needtu" value="3" disabled title="坐标" ><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><span >坐标</span></div>
            </div>
        </div>
        <div  id="innerFrame" style="display: none;">
            坐标填写步骤：
            <div class="tips">
                <ol>
                    <li>1. 在“百度地图”中搜索位置</li>
                    <li>2. 选取位置</li>
                    <li>3. 复制坐标(坐标格式：经度,纬度。比如：113.109428,27.812544)</li>
                    <li>4. 粘贴坐标放入配置内容中</li>
                </ol>
            </div>
            <iframe src="http://api.map.baidu.com/lbsapi/getpoint/index.html" width="90%" height="600px"></iframe>
        </div>
        <div class="layui-upload" style="display: none;" id="upbox">
            <button type="button" class="layui-btn" id="test" style="display: inline;float: left;">图片</button>
            <div class="layui-upload-list" style="display: inline;margin-left: 30px;">
                <img class="layui-upload-img" name="image" id="image" style="width: 200px;height: 150px">
                <p id="demoText"></p>
            </div>
            <input type="hidden" class="input-text" id="mjimg" name="imgsrc">
            <input type="hidden" class="input-text" id="is_show" name="is_show">
            <input type="hidden" class="input-text" id="id" name="id">
        </div>
        <div class="layui-form-item" style="margin-top: 20px">
            <div class="layui-input-block">
                <button class="layui-btn" id="addWuye" lay-submit lay-filter="addWuye" >立即修改</button>
                <button type="reset" id="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script src="/js/layui/layui.js"></script>
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>
<script>
    //url 传参
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var a = decodeURI(decodeURI(window.location.search));
        var r = a.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return  unescape(r[2]); return null;
    }
    var uploadType=1;
    layui.use(['form' , 'jquery' , 'upload','layer'], function(){
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var $ = layui.jquery;
        var id = GetQueryString("id");
        // 查询详情
        $.ajax({
            url: "/config/getone"
            , data: {"id":id}
            , success: function (res) {
                $("#name").val(res.data.name);
                $("#value").val(res.data.value);
                $("#is_show").val(res.data.is_show);
                $("#mjimg").val(res.data.value);
                $("#id").val(res.data.id);
                if(res.data.type==2){
                    $("#message_phone").hide();
                    $("#upbox").show();
                    uploadType=2;
                    $("#yao").attr("checked",true);
                    $("#image").attr("src",'/upload/'+res.data.value);
                    form.render("radio");
                }else if(res.data.type==3){
                    $("#innerFrame").show();
                    uploadType=3;
                    $("#zuobiao").prop("checked",true);
                    $("#buyao").prop("checked",false);
                    form.render("radio");
                }
                $("#name").val(res.data.name);
            }
        })


        // 是否上传图片
        form.on('radio(needtu)', function(data){
            // console.log(data.elem); //得到radio原始DOM对象
            // console.log(data.value); //被点击的radio的value值
            if(data.value==1){
                $("#upbox").show();
                $("#message_phone").hide();
                uploadType=2;
            }else{
                $("#upbox").hide();
                $("#message_phone").show();
                uploadType=1;
            }
        });

        //修改操作
        form.on('submit(addWuye)',function(data){
           {
               if(uploadType==2){
                   data.field.value=$("#mjimg").val();
               }
               data.field.type=uploadType;
               data.field.name =  replaceReg(data.field.name);  // 替换
               data.field.value =  replaceReg(data.field.value);  // 替换
               if(uploadType==3){
                   if(data.field.value.indexOf(",")==-1){       // 验证坐标格式是否正确
                       layer.msg("坐标格式错误，请务必按照步骤操作");
                       return false;
                   }
               }
                var msgMovie = layer.load(1);
                $.ajax({
                    url:"/config/updateinfo"
                    ,type:"POST"
                    ,contentType: 'application/json'
                    ,data:JSON.stringify(data.field)
                    ,success:function (data) {
                        if(data.code==200){
                            layer.msg('修改成功');
                            setTimeout(function(){
                                parent.layer.closeAll();
                                window.location.reload();
                            },2000);
                        }else {
                            layer.msg(data.msg,{icon:2,time:2000})
                        }
                    }
                    ,error:function () {
                        console.log("ajax error");
                    }
                });
                layer.close(msgMovie);
            }
            return false;
        });
        //logo上传
        var uploadInst = upload.render({
            elem: '#test'
            , url: '/upload' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#image').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //判断上传是否成功
                if (res.code == 0) {
                    // image = res.data
                    $("#mjimg").val(res.data);
                    $("#value").val(res.data);
                    return layer.msg('上传成功！');
                } else {
                    return layer.msg('上传失败！');
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
</script>
</html>